<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.keyword" placeholder="工作室名称 / 详细地址 查询" class="handle-input mr10" clearable></el-input>
                <el-button type="primary" icon="el-icon-search" @click="func_handleSearch" plain>搜索</el-button>
                <el-button type="danger" icon="el-icon-lx-add" @click="func_handleAdd" plain>添加</el-button>
            </div>
            <el-table :data="workRoomTableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" width="55" align="center" v-if="false"></el-table-column>
                <el-table-column label="序号" width="80" align="center"><template #default="scope">
                        {{scope.$index+1}}
                </template></el-table-column>
                <el-table-column prop="workRoomName" label="点击查看详情" width="220" >
                    <template #default="scope">
                        <el-button type="text" @click="func_handleDrawerOpen(scope.$index, scope.row)"> <el-icon class="el-icon-s-unfold" /> {{scope.row.workRoomName}} </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="workRoomName" label="工作室名称" v-if="false"></el-table-column>
                <el-table-column prop="businessTime" label="营业时间" align="center" ></el-table-column>
                <el-table-column prop="workday" label="工作日" align="center" ></el-table-column>
                <el-table-column prop="weekend" label="周末" align="center" ></el-table-column>
                <el-table-column label="详细地址" align="center" width="440">
                    <template #default="scope">{{scope.row.province}}&nbsp;&nbsp;{{scope.row.city}}&nbsp;&nbsp;{{scope.row.area}}&nbsp;&nbsp;{{ scope.row.detailedAddress }}</template>
                </el-table-column>
                <el-table-column prop="status" label="工作室状态" width="110">
                    <template #default="scope">
                        <el-tag :type=" scope.row.status === 1 ? 'success' : scope.row.status === '0' ? 'danger' : '' ">{{ scope.row.strStatus }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template #default="scope">
                        <el-button type="text" icon="el-icon-edit" @click="func_handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="func_handleDelete(scope.$index, scope.row)">删除</el-button>
                        <el-button type="text" icon="el-icon-edit" @click="func_jumpProjectConfig(scope.$index, scope.row)">配置服务项目</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="func_handlePageChange"></el-pagination>
            </div>
        </div>
        <!-- 详细抽屉 -------------------------------------------------------------------------------------------------------------- -->
        <el-drawer title="详细信息" v-model="drawerViewVisible " direction="rtl" size="68%">
            <el-card class="drawer-box-card">
                <el-row :gutter="10" class="row-bg">
                    <el-col :span="4"><div class="grid-label">数据ID</div></el-col>
                    <el-col :span="6"><div class="grid-content">{{workRoomDrawerForm.id}}</div></el-col>
                </el-row>
                <el-row :gutter="10" class="row-bg">
                    <el-col :span="4"><div class="grid-label">更新时间</div></el-col>
                    <el-col :span="12"><div class="grid-content">{{workRoomDrawerForm.createTime}}</div></el-col>
                </el-row>
                <el-divider />
                <el-row :gutter="10" class="row-bg">
                    <el-col :span="4"><div class="grid-label">工作室名称</div></el-col>
                    <el-col :span="6"><div class="grid-content">{{workRoomDrawerForm.workRoomName}}</div></el-col>
                    <el-col :span="4"><div class="grid-label">工作室状态</div></el-col>
                    <el-col :span="6"><div class="grid-content">
                        <el-tag :type="
                        workRoomDrawerForm.status === 1 ? 'success' : workRoomDrawerForm.status === '0' ? 'danger' : ''
                        ">{{ workRoomDrawerForm.strStatus }}
                        </el-tag>
                    </div></el-col>
                </el-row>
            </el-card>
            <el-tabs type="border-card" class="drawer-box-tabs">
                <el-tab-pane>
                    <template #label>
                        <el-icon></el-icon><span>基本信息</span>
                    </template>
                    <el-row :gutter="10">
                        <el-col :span="4"><div class="grid-label">营业时间</div></el-col>
                        <el-col :span="20"><div class="grid-content">{{workRoomDrawerForm.businessTime}}</div></el-col>
                        <el-col :span="4"><div class="grid-label">工作日</div></el-col>
                        <el-col :span="20"><div class="grid-content">{{workRoomDrawerForm.workday}}</div></el-col>
                        <el-col :span="4"><div class="grid-label">周末</div></el-col>
                        <el-col :span="20"><div class="grid-content">{{workRoomDrawerForm.weekend}}</div></el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="4"><div class="grid-label">详细地址</div></el-col>
                        <el-col :span="12"><div class="grid-content">{{workRoomDrawerForm.province}}&nbsp;&nbsp;
                            {{workRoomDrawerForm.city}}&nbsp;&nbsp;{{workRoomDrawerForm.area}}&nbsp;&nbsp;{{workRoomDrawerForm.detailedAddress}}
                            </div></el-col>
                    </el-row>
                    <el-divider />
                    <el-row>
                        <el-col :span="4"><div class="grid-label">地图坐标</div></el-col>
                        <el-col :span="12">{{workRoomDrawerForm.latitude}} / {{workRoomDrawerForm.longitude}}</el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="project">
                    <template #label>
                        <el-icon></el-icon><span>服务项目</span>
                    </template>
                    <el-table :data="workRoomDrawerForm.roomProjectVoList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                        <el-table-column type="expand">
                            <template #default="scope">
                            <el-table :data="scope.row.childProjectVoList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                                <el-table-column prop="cId" label="ID" width="55" align="center"></el-table-column>
                                <el-table-column prop="cName" label="服务项目名称" ></el-table-column>
                                <el-table-column prop="cDec" label="服务项目描述" ></el-table-column>
                                <el-table-column prop="isConfig" label="绑定服务" >
                                    <template #default="scope">
                                        <el-tag :type="
                                        scope.row.isConfig === 1 ? 'success' : 'danger'
                                        ">{{ scope.row.isConfig === 1?'已配置':'未配置' }}
                                        </el-tag>
                                        <!-- <el-button style="margin-left:10px" v-if="scope.row.isConfig === 0" type="primary" size="small">绑定服务</el-button>
                                        <el-button style="margin-left:10px" v-if="scope.row.isConfig === 1" type="danger" size="small">删除服务</el-button> -->
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- {{scope.row.childProjectVoList}} -->
                            </template>
                        </el-table-column>
                        <el-table-column prop="pId" label="ID" width="55" align="center"></el-table-column>
                        <el-table-column prop="pName" label="服务项目名称" ></el-table-column>
                        <el-table-column prop="pDec" label="服务项目描述" ></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="barber">
                    <template #label>
                        <el-icon></el-icon><span>发型师</span>
                    </template>
                    <el-table :data="workRoomDrawerForm.barberList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                        <el-table-column label="头像" >
                            <template #default="scope">
                                <el-image :src="scope.row.headPortrait" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称" ></el-table-column>
                        <el-table-column prop="spellName" label="拼音" ></el-table-column>
                        <el-table-column prop="grade" label="等级" ></el-table-column>
                        <el-table-column prop="phone" label="手机号码" ></el-table-column>
                        <el-table-column prop="craftValue" label="手艺值" ></el-table-column>
                        <el-table-column prop="workYear" label="工作年限" ></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="price">
                    <template #label>
                        <el-icon></el-icon><span>价目表</span>
                    </template>
                    <el-table :data="workRoomDrawerForm.priceList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                        <el-table-column v-if="false" prop="workRoomId" label="工作室id" ></el-table-column>
                        <el-table-column v-if="false" prop="barberId" label="理发师id" ></el-table-column>
                        <el-table-column v-if="false" prop="serviceProjectId" label="服务项目id" ></el-table-column>
                        <el-table-column prop="bName" label="理发师名称" ></el-table-column>
                        <el-table-column prop="pName" label="服务项目名称" ></el-table-column>
                        <el-table-column prop="price" label="服务金额" ></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="workRoomPic">
                    <template #label>
                        <el-icon></el-icon><span>工作室图片</span>
                    </template>
                    <el-row>
                        <el-col :span="4"><div class="grid-label">工作室定位logo</div></el-col>
                        <el-col :span="12"> 
                            <el-card :body-style="{ padding: '6px', margin: '5px 5px 5px 5px' }">
                                <el-image :src="workRoomDrawerForm.workRoomLogo" />
                                <div style="padding: 14px">
                                    <div class="bottom card-header">
                                        <el-button type="text" class="button">更换LOGO</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-divider />
                    <el-row style="margin-top:10px">
                        <el-col :span="4"><div class="grid-label">工作室图片</div></el-col>
                        <el-col :span="12">
                            <el-card :body-style="{ padding: '6px', margin: '5px 5px 5px 5px' }">
                            <el-carousel :interval="5000" arrow="always">
                                <el-carousel-item v-for="item in workRoomDrawerForm.workRoomPics" :key="item">
                                <el-image :src="item" />
                                </el-carousel-item>
                            </el-carousel></el-card>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-drawer>
        <!-- ---------------------------------------------------------------------------------------------------------------------- -->
        <!-- 编辑弹出框 -->
        <el-dialog title="工作室编辑" v-model="editDialogVisible" width="55%" :close-on-click-modal="false">
            <el-container>
                <el-header>
                    <el-steps :active="1" align-center>
                        <el-step title="Step 1" description="基本信息" />
                        <el-step title="Step 2" description="配置服务项目" />
                        <el-step title="Step 3" description="理发师" />
                    </el-steps>
                </el-header>
                <el-main>
                    <el-card style="margin-top:25px">
                        <el-form :label-width="formLabelWidth">
                            <el-form-item label="工作室名称" >
                                <el-input v-model="workRoomForm.workRoomName" placeholder="工作室名称" clearable size="medium" style="width:350px" />
                            </el-form-item>
                            <el-form-item label="工作室状态">
                                <el-switch v-model="workRoomForm.status" active-value=1 inactive-value=0></el-switch>
                                <el-input v-model="workRoomForm.status" v-if="false"></el-input>
                            </el-form-item>
                            <el-form-item label="营业时间" >
                                <el-input v-model="workRoomForm.businessTime" placeholder="营业时间" clearable size="medium" style="width:350px" />
                            </el-form-item>
                            <el-form-item label="工作日" >
                                <el-input v-model="workRoomForm.workday" placeholder="工作日时间" clearable size="medium" style="width:350px" />
                            </el-form-item>
                            <el-form-item label="周末" >
                                <el-input v-model="workRoomForm.weekend" placeholder="周末时间" clearable size="medium" style="width:350px" />
                            </el-form-item>
                            <el-form-item label="省市区">
                                <el-col :span="8" class="mr10">
                                    <el-input v-model="workRoomForm.province" placeholder="省"></el-input>
                                </el-col>
                                <el-col :span="8" class="mr10">
                                    <el-input v-model="workRoomForm.city" placeholder="市"></el-input>
                                </el-col>
                                <el-col :span="8" class="mr10">
                                    <el-input v-model="workRoomForm.area" placeholder="区"></el-input>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="详细地址">
                                <el-input v-model="workRoomForm.detailedAddress" placeholder="详细地址" clearable size="medium" style="width:350px" />
                            </el-form-item>
                            <el-form-item label="百度地图定位" >
                                <el-input v-model="workRoomForm.detailedAddress" placeholder="详细地址" clearable size="medium" style="width:350px"/>
                            </el-form-item>
                            <el-form-item label="工作室定位logo" >
                                <el-input v-model="workRoomForm.workRoomLogo" placeholder="工作室定位logo" clearable size="medium" style="width:350px"/>
                            </el-form-item>
                            <el-form-item label="工作室图片" >
                                <el-input v-model="workRoomForm.workRoomPic" placeholder="工作室图片" clearable size="medium" style="width:350px" />
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-main>
                <el-footer>
                    <span class="dialog-footer">
                        <el-button @click="editDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="func_saveDialogEdit">确 定</el-button>
                    </span>
                </el-footer>
            </el-container>
        </el-dialog>
    </div>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchWorkRoomListData, fetchWorkRoomDetailData, saveWorkRoom, deleteWorkRoomById,configWorkRoomProject } from "../../../api/hairmanager/workroom";
export default {
    name: "workroom",
    components: {},
    setup() {
        const router = useRouter();
        const SUCCMESS_ADDDATA_DIALOG_MESSAGE = "添加数据成功";
        const formLabelWidth = ref("170px");
        //主数据条件查询
        const query = reactive({
            keyword: "",
            pageIndex: 1,
            pageSize: 10,
        });
        // 主数据总页数
        const pageTotal = ref(0);
        // 主数据表格
        let workRoomTableData = ref([]);
        const workRoomForm = reactive({
            workRoomName:"",
            status:"",
            businessTime:"",
            workday:"",
            weekend:"",
            province:"",
            city:"",
            area:"",
            detailedAddress:"",
            workRoomLogo:"",
            workRoomPic:""
        });
        // 表格编辑时弹窗和保存
        const editDialogVisible = ref(false);
        // 表格详细数据抽拉层
        const drawerViewVisible = ref(false);
        // 主详细数据表格
        let workRoomDrawerForm = ref({});
        let addFlg = ref(false);
// =========================================================================================
        /**
         * @name 获取表格数据
         */
        const func_getData = () => {
            fetchWorkRoomListData(query).then((res) => {
                workRoomTableData.value = res.data.list;
                pageTotal.value = res.data.totalPage;
            });
        };
        func_getData();
        /**
         * @name 主数据查询操作
         */
        const func_handleSearch = () => {
            query.pageIndex = 1;
            func_getData();
        };
        /**
         * @name 分页导航
         */
        const func_handlePageChange = (val) => {
            query.pageIndex = val;
            func_getData();
        };
        /**
         * @name 主数据编辑对话框操作
         */
        const func_handleAdd = (v) => {
            workRoomForm.value = {};
            addFlg.value = true;
            editDialogVisible.value = true;
        }
        /**
         * @name 读取工作室详细数据
         */
        let idx = -1;
        const func_handleEdit = (index, row) => {
            idx = index;
            fetchWorkRoomDetailData(row['id']).then((res)=>{
                if(res.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    Object.keys(res.data).forEach((item) => {
                        workRoomForm[item] = res.data[item];
                    });
                }
            });
            addFlg.value = false;
            editDialogVisible.value = true;
        };
        /**
         * @name 删除工作室数据操作
         */
        const func_handleDelete = (index, row) => {
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {
            type: "warning",
            }).then(() => {
                func_delDialogEdit(row['id']);
            }).catch(() => {});
        };
        /**
         * @name 保存工作室配置
         */
        const func_saveDialogEdit = () => {
            saveWorkRoom(workRoomForm).then((res) => {
                if(res.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    if(addFlg === true){
                        ElMessage.success(SUCCMESS_ADDDATA_DIALOG_MESSAGE);
                    }else{
                        ElMessage.success(`修改第 ${idx + 1} 行成功`);
                    }
                    editDialogVisible.value = false;
                    func_getData(); // 刷新数据
                }
            });
        };
        /**
         * @name 删除工作室配置
         */
        const func_delDialogEdit = (id) => {
            deleteWorkRoomById(id).then((res)=>{
                if(res.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    ElMessage.success("删除成功");
                    func_getData(); // 刷新数据
                }
            });
        };
        /**
         * @name 打开弹出层
         */
        const func_handleDrawerOpen = (index, row) => {
            fetchWorkRoomDetailData(row['id']).then((res)=>{
                 workRoomDrawerForm.value = res.data;
            });
            drawerViewVisible.value=true;
        };
        /**
         * @name 跳转到工作室配置页面
         */
        const func_jumpProjectConfig = (index, row) => {
            // 通过路由跳转到详细配置页面
            router.push({path:'/workRoomConfig',query:{id:row['id']}});
        };
        return {
            formLabelWidth, query, pageTotal, func_handleSearch, func_handlePageChange,
            func_getData, workRoomTableData, func_handleAdd, func_handleEdit, func_handleDelete,
            workRoomForm, editDialogVisible, addFlg, 
            func_saveDialogEdit, func_delDialogEdit,
            workRoomDrawerForm, drawerViewVisible, func_handleDrawerOpen,
            func_jumpProjectConfig,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
<style>
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 4px;
}
.grid-label {
    background: #00000;
    min-height: 36px;
    padding-left: 25px;
}
.grid-content {
    background: #00000;
    min-height: 36px;
    padding-left: 6px;
}
.row-bg {
    padding: 0px 0px 0px 0px;
}
.drawer-box-card {
    width:95%;
    margin-left:15px;
    overflow: auto;
}
.drawer-box-tabs {
    width:95%;
    margin-top:10px;
    margin-left:15px;
    overflow: auto;
    height: 900px;
}
</style>